<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 
一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知值的代理。它让你能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。
    一个 Promise 必然处于以下几种状态之一：

待定（pending）：初始状态，既没有被兑现，也没有被拒绝。
已兑现（fulfilled）：意味着操作成功完成。
已拒绝（rejected）：意味着操作失败。
   -->

  <script>
    /* let p = new Promise( ( resolve, reject ) => {

      // resolve(): 当执行异步操作成功的时候，调用 resolve()
      // reject():当执行异步操作成功的时候，调用 reject()
      let a = false;
      setTimeout( function () {
        console.log( a );
        if ( a ) {
          resolve( "成功" ) // 返回一个成功的结果
        } else {
          reject( '失败' ) // 返回一个失败的结果
        }
      }, 3000 )
    } );
 */
    // then(), 接收成功状态时返回的结果
    // catch(), 接收失败状态时返回的结果
    /*   p.then( ( value ) => {
        console.log( value )
      } )
        .catch( value => {  // 箭头函数的参数，如果只有一个时，可以不加().
          console.log( value )
        } ) */

    /*     new Promise( ( resolve, reject ) => {
          let a = true;
          setTimeout( function () {
            console.log( a );
            if ( a ) {
              resolve( "成功" ) // 返回一个成功的结果
            } else {
              reject( '失败' ) // 返回一个失败的结果
            }
          }, 3000 )
        } )
          .then( ( value ) => {
            console.log( value )
          } )
          .catch( value => {  // 箭头函数的参数，如果只有一个时，可以不加().
            console.log( value )
          } )
     */

    window.onload = function () {
      let url = "http://127.0.0.1:80/user/getall";
      // 1. 请求后台数据
      let result = new Promise( ( resolve, reject ) => {
        let xhr = new XMLHttpRequest();
        xhr.open( "get", url, true );
        xhr.send();
        xhr.onreadystatechange = () => {
          if ( xhr.readyState === 4 && xhr.status === 200 ) {
            let res = JSON.parse( xhr.responseText )
            if ( res.code === 0 ) {
              resolve( res.data )
            } else {/*  */
              reject( res.msg )
            }
          }
        }
      } );

      // console.log( "result=", result )
      /*
      [[Prototype]]: Promise
      [[PromiseState]]: "fulfilled"
      [[PromiseResult]]: Array(4)
      */
      // 2. 成功时渲染DOM,失败时提示失败。
      result.then( ( resultValue ) => {
        console.log( resultValue )
        // DOM的更新
      } ).catch( errorValue => {
        console.log( errorValue )
        // DOM的更新，如错误提示框。
      } )
    }

    // 用同步思维的代码写法，解决异步逻辑的问题。

  </script>
</body>

</html>